<template>
    <div class="">
        <transition name="left-fade">
            <img src="../assets/logo.png"  v-show="show"/>
        </transition>
        <transition name="left-fade">
            <img src="../assets/logo2.png" width="200px" height="200px" v-show="!show"/>
        </transition>
        <img src="../assets/logo.png"/>
        <img src="../assets/logo.png"/>

        <button @click="handleChange">change</button>
        <transition name="fade" >
            <button v-show="show1">fade</button>
        </transition>

        <button @click="handleChange2">change2</button>
        <transition name="slide-fade">
            <div v-if="show">hello</div>

        </transition>
    </div>
</template>
<script>
export default {
    methods:{
        handleChange2(){
            this.show=!this.show
        },
        handleChange(){
            console.log('clicked')
            this.show1=!this.show1
        }
    },
    data(){
        return {
            show:true,
            show1:true
        }
    }
}
</script>
<style scoped>
    .left-fade-enter-active{
        transition: all .3s ease;
    }
    .left-fade-leave-active{
        transition: all .3s ease;
    }

    .left-fade-enter{
        transform: translateX(+200px);
    }

    .left-fade-leave-to{
        transform: translateX(-200px);
        
    }

    .slide-fade-enter{
        transition: all .3s linear;
    }

    .slide-fade-enter-active{
        transition: all .3s linear;
    }
    .slide-fade-leave-active{
        transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);
    }
    .slide-fade-enter, .slide-fade-leave-to{
        transform: translateX(10px);
    }


    .fade-enter-active, .fade-leave-active{
        transition: opacity .5s;
    }

    .fade-enter, .fade-leave-to{
        opacity: 0;
    }


    .div2{
        position: relative;
        -webkit-animation: mymove 2s ease-in-out 0s alternate forwards;
    }
    @-webkit-keyframes mymove{
        from{
            left: 0

        }
        to{
            left: -200px
        }
    }
</style>